<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: #94bfb560;
        ;
        }
        /*头像区*/
        .user-head {
            width: 150px;
            height:150px;
            margin: 20px auto;
            border-radius: 50%;
            border:5px solid #FFFFFF;
            overflow: hidden;
        }
        .user-head img {
            width: 100%;
            display: block; /*防止莫名奇妙的空白*/
        }
        /*左侧导航菜单*/
        .nav-left .list-group-item{
            background: transparent;/*透明*/
            border:none;
            border-radius:0;
            text-align: center;
            font-size: 16px;
            color: #333333;
            letter-spacing: 1px;
            border-bottom: 1px solid #444444;
        }
    </style>
</head>
<body>
<div class="container-fluid"><!--默认100%宽度 -->
    <!--头像区-->
    <div class="row user-head">     <!--content是一会写的右侧区域的名字-->
        <a href="#" target="content" title="点击修改用户头像">
            <img  id="empPic"  src="images/liudehua.jpg" class="img-responsive"/>
            <!--响应式  -->
        </a>
    </div>
    <!--用户欢迎-->
    <p class="text-center" style="color: #333333;">
        欢迎你，<span id="empLoginName"></span>
    </p>
    <!--导航菜单列表-->
    <div class="row nav-left">
        <div class="list-group">
            <a href="Student.html" class="list-group-item" target="content">个人主页</a>
            <a href="QueryScoreStudent.html" class="list-group-item" target="content">成绩查询</a>
            <a href="index.html" class="list-group-item" target="_parent">退出登录</a>
        </div>
    </div>
</div>
<script src="js/jquery.js"></script>
</body>
</html>